<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>工厂管理 Content Form</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/statics/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/statics/style/admin.css}" media="all">
    <link rel="stylesheet" th:href="@{/statics/wang/wangeditor.css}">
    <style type="text/css">
        html{
            background-color: #FFF;
        }
        .pic {
            margin-left: 130px;
        }

        .pic dl {
            float: left;
            position: relative;
        }

        .pic dl dd {
            position: absolute;
            right: 5px;
            top: 5px;
            cursor: pointer;
            background: #666;
            color: #fff;
            padding: 2px;
        }

        .pic img {
            height: 100px;
            margin: 5px 0;
            margin-right: 5px;
        }

    </style>
</head>
<body>

<div class="layui-form" lay-filter="layuiadmin-form-content" id="layuiadmin-form-content" style="padding: 0px 5px;">
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">基本信息</li>
            <li>高级选项</li>
            <li>公司历程</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="layui-form-item">
                    <label class="layui-form-label">简称</label>
                    <div class="layui-input-block">
                        <input type="text" name="sname" lay-verify="required" autocomplete="off" placeholder="请输入简称"
                               class="layui-input" th:value="${factory.sname}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="请输入名称"
                               class="layui-input" th:value="${factory.name}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">图标</label>
                    <div class="layui-input-inline">
                        <input type="text" name="icon" id="icon" lay-verify="required" placeholder="请上传图标" class="layui-input" th:value="${factory.icon}">
                    </div>
                    <button type="button" class="layui-btn upload upload-pic" id="upload-icon" data-des="icon">
                        <i class="layui-icon">&#xe67c;</i>上传图标
                    </button>
                    <div class="pic pic_box">
                        <dl th:if="${factory.icon}">
                            <dt><img th:src="${factory.icon}"
                                     th:data-url="${factory.icon}"></dt>
                            <dd name="deleteFile" th:data-url="${factory.icon}"  data-des="icon">删除</dd>
                        </dl>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">公司全称</label>
                    <div class="layui-input-block">
                        <input type="text" name="company" lay-verify="required" autocomplete="off" placeholder="请输入司全称"
                               class="layui-input" th:value="${factory.company}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">简介</label>
                    <div class="layui-input-block">
                        <textarea name="memo" placeholder="请输入简介" lay-verify="required" class="layui-textarea">[[${factory.memo}]]</textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">内容</label>
                    <div class="layui-input-block">
                        <textarea id="decription" name="decription" lay-verify="required" placeholder="请输入内容" class="layui-textarea" style="height: 400px;">
                            [[${factory.decription}]]
                        </textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">主图</label>
                    <div class="layui-input-inline">
                        <input type="text" name="picture" id="picture" lay-verify="required" placeholder="请上传主图" class="layui-input" th:value="${factory.picture}">
                    </div>
                    <button type="button" class="layui-btn upload upload-pic" id="upload-picture" data-des="picture">
                        <i class="layui-icon">&#xe67c;</i>上传图片
                    </button>
                    <div class="pic pic_box">
                        <dl th:if="${factory.picture}">
                            <dt><img th:src="${factory.picture}"
                                     th:data-url="${factory.picture}"></dt>
                            <dd name="deleteFile" th:data-url="${factory.picture}"  data-des="picture">删除</dd>
                        </dl>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="address" lay-verify="required" autocomplete="off" placeholder="请输入地址"
                               class="layui-input" th:value="${factory.address}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">电话</label>
                    <div class="layui-input-block">
                        <input type="text" id="telephone" name="telephone" lay-verify="required" autocomplete="off" placeholder="请输入电话" class="layui-input"
                               th:value="${factory.telephone}">
                    </div>
                </div>
                <label class="layui-form-label">相册地址</label>
                <div class="layui-input-block">
                    <input type="text" name="galleryUrl" id="galleryUrl" lay-verify="required" placeholder="请输入相册地址" class="layui-input" th:value="${factory.galleryUrl}">
                </div>
            </div>
            <div class="layui-tab-item">
                <div class="layui-form-item">
                    <label class="layui-form-label">团队主图</label>
                    <div class="layui-input-block">
                        <input type="text" name="teamGroup" autocomplete="off" placeholder="请输入团队主图地址"
                               class="layui-input" th:value="${factory.teamGroup}">
                        <div class="layui-form-mid layui-word-aux">请从媒体相册中复制图片地址，并粘贴。</div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">认证地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="certificationUrl" autocomplete="off" placeholder="请输入认证图册地址"
                               class="layui-input" th:value="${factory.certificationUrl}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">认证图片</label>
                    <div class="layui-input-block">
                        <textarea name="certifications" placeholder="请输入认证图片" class="layui-textarea">[[${factory.certifications}]]</textarea>
                        <div class="layui-form-mid layui-word-aux">请从媒体相册中复制图片地址，并粘贴；多个图片用半角分号隔开。</div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">荣誉地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="awardrl" autocomplete="off" placeholder="请输入荣誉图册地址"
                               class="layui-input" th:value="${factory.awardUrl}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">荣誉图片</label>
                    <div class="layui-input-block">
                        <textarea name="awards" placeholder="请输入荣誉图片" class="layui-textarea">[[${factory.awards}]]</textarea>
                        <div class="layui-form-mid layui-word-aux">请从媒体相册中复制图片地址，并粘贴；多个图片用半角分号隔开。</div>
                    </div>
                </div>
            </div>
            <div class="layui-tab-item">
                <div class="layui-form-item">
                    <label class="layui-form-label">历程图片</label>
                    <div class="layui-input-inline">
                        <input type="text" name="milestone" id="milestone" lay-verify="required" placeholder="请上传历程图片" class="layui-input" th:value="${factory.milestone}">
                    </div>
                    <button type="button" class="layui-btn upload upload-pic" id="upload-milestone" data-des="milestone">
                        <i class="layui-icon">&#xe67c;</i>上传历程图片
                    </button>
                    <div class="pic pic_box">
                        <dl th:if="${factory.milestone}">
                            <dt><img th:src="${factory.milestone}"
                                     th:data-url="${factory.milestone}"></dt>
                            <dd name="deleteFile" th:data-url="${factory.milestone}"  data-des="icon">删除</dd>
                        </dl>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">历程图册</label>
                    <div class="layui-input-block">
                        <textarea name="dateLines" placeholder="请输入历程图册地址" lay-verify="required" class="layui-textarea">[[${factory.dateLines}]]</textarea>
                        <div class="layui-form-mid layui-word-aux">请输入历程图册地址；多个地址用半角分号隔开。</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-hide">
            <input type="hidden" name="id" th:value="${factory.id}"/>
            <input type="hidden" name="lang" th:value="${factory.lang == null ? lang:factory.lang}"/>
            <button class="layui-btn" lay-submit lay-filter="LAY-factory-add-submit" id="LAY-factory-add-submit">提交</button>
        </div>
    </div>

    <script th:src="@{/statics/layui/layui.js}"></script>
    <script>
        layui.config({
            base: '/statics/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'form','laydate', 'upload', 'wangeditor'], function () {
            var $ = layui.$
                , form = layui.form
                , laydate = layui.laydate
                , wang = layui.wangeditor('decription')
                , upload = layui.upload;

            wang.config.customUpload = false;
            wang.config.uploadImgUrl = '/web/wangEditor/local/saveImg';
            wang.config.uploadImgFileName = 'file';
            wang.config.uploadImgFns.onload = function (resultText, xhr) {
                var obj = eval('(' + resultText + ')');
                wang.command(null, 'insertHtml', '<img src="' + obj.data + '" style="max-width:100%;"/>');
            };
            wang.create();

            laydate.render({
                elem: '.datetime'
                ,type: 'datetime'
            });

            upload.render({
                elem: '.upload-file'
                , url: '/api/file/local/upload?type=files'
                , accept: 'file'
                , method: 'post'
                , multiple: false //多文件上传
                ,before: function(obj){
                    layer.load(); //上传loading
                }
                ,done: function(res){
                    var item = this.item;
                    var des=$(item).data('des');
                    console.log(res.data);
                    layer.closeAll('loading'); //关闭loading
                    if(res.code==0){
                        $('#'+des).val(res.data);
                        layer.msg('上传成功！');
                    }else{
                        layer.msg('上传失败！');
                    }
                }
                ,error: function(){
                    layer.closeAll('loading'); //关闭loading
                    layer.msg('上传发生错误！');
                }
            });

            upload.render({
                elem: '.upload-pic'
                , url: '/api/file/local/upload'
                , accept: 'images'
                , method: 'post'
                , multiple: false //多文件上传
                , acceptMime: 'image/*'
                ,before: function(obj){
                    layer.load(); //上传loading
                }
                ,done: function(res){
                    var item = this.item;
                    var des=$(item).data('des');
                    console.log(des);
                    layer.closeAll('loading'); //关闭loading
                    if(res.code==0){
                        $('#'+des).val(res.data);
                        layer.msg('上传成功！');
                    }else{
                        layer.msg('上传失败！');
                    }
                }
                ,error: function(){
                    layer.closeAll('loading'); //关闭loading
                    layer.msg('上传发生错误！');
                }
            });

            //选择模型切换模板
            form.on('select(model)', function(data){
                var elem = data.elem;
                var type = $(elem).find("option:selected").data('type');
                var listUrl = $(elem).find("option:selected").data('list-url');
                var infoUrl = $(elem).find("option:selected").data('info-url');

                $("#listUrl").val(listUrl);
                $("#infoUrl").val(infoUrl);
                form.render(null, 'layuiadmin-form-content');
            });

            $("dd[name='deleteFile']").on("click" , function(){
                var url = $(this).data('url');
                var des = $(this).data('des');
                var picbox = $(this).parent().parent();
                $.ajax({
                    url: '/api/file/local/remove?key=' + url,
                    method: 'DELETE',
                    contentType: "application/json;charset=UTF-8",
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.code == '0') {
                            layer.msg('文件已删除!', {icon: 1, time: 1000}, function () {
                                picbox.hide();
                                $('#'+des).val('');
                            });
                        } else {
                            layer.msg(res.msg);
                        }
                    },
                    error: function (err) {
                    }
                });
            });
        })
    </script>
</body>
</html>